<template>
	<view class="page">
		<uni-nav-bar left-icon="left" @clickLeft="back" backgroundColor="#3183FB" style="width: 100%;" :border="false"
			color="#fff" title="修改信息"></uni-nav-bar>
		<view class="background"></view>
		<!-- 表单部分 -->
		<view class="form-card" style="top: -170rpx;">
			<form @submit="onSubmit">
				<view class="form-item">
					<label class="form-label">负责人：</label>
					<input class="form-input" placeholder="输入负责人名字">
				</view>
				<view class="form-item">
					<label class="form-label">身份证号码：</label>
					<input class="form-input" placeholder="输入负责人身份证号码">
				</view>
				<view class="form-item">
					<label class="form-label">手机号：</label>
					<input class="form-input" placeholder="输入手机号">
				</view>
				<view class="form-item verification-code-item">
					<label class="form-label">验证码：</label>
					<input class="form-input verification-code-input" placeholder="输入验证码">
					<span class="get-verification-code" @click="getVerificationCode">获取验证码</span>
				</view>
				<view class="form-item">
					<label class="form-label">店名：</label>
					<input class="form-input" placeholder="输入店名">
				</view>
				<view class="form-item">
					<label class="form-label">工商营业执照号码：</label>
					<input class="form-input" placeholder="输入营业执照号码">
				</view>
				<view class="form-item">
					<label class="form-label">经营区域：</label>
					<input class="form-input" placeholder="选择区县">
				</view>
				<view class="form-item">
					<label class="form-label">地址：</label>
					<input class="form-input" placeholder="输入详细地址">
				</view>
			</form>
		</view>
		<!-- 商家简介部分 -->
		<view class="info-card">
			<view class="card-title">商家简介</view>
			<form @submit="onSubmit">
				<textarea class="info-textarea" placeholder="请准确的介绍一下公司的情况"
					placeholder-style="font-size: 24rpx;"></textarea>
			</form>
		</view>
		<!-- 身份证正反面照片部分 -->
		<view class="upload-card">
			<view class="card-title">身份证正反面照片</view>
			<form @submit="onSubmit">
				<view class="upload-container">
					<uni-file-picker limit="1" :image-styles="imageStyles" class="upload-picker">
						<view class="upload-content">
							<uni-icons type="plusempty" size="30" style="color: #BFBFBF;"></uni-icons>
							<view class="upload-text">上传人像面</view>
						</view>
					</uni-file-picker>
					<uni-file-picker limit="1" :image-styles="imageStyles" class="upload-picker">
						<view class="upload-content">
							<uni-icons type="plusempty" size="30" style="color: #BFBFBF;"></uni-icons>
							<view class="upload-text">上传国徽面</view>
						</view>
					</uni-file-picker>
				</view>
			</form>
		</view>
		<!-- 营业执照部分 -->
		<view class="upload-card">
			<view class="card-title">营业执照</view>
			<form @submit="onSubmit">
				<view class="upload-container">
					<uni-file-picker limit="1" :image-styles="imageStyles" class="upload-picker">
						<view class="upload-content">
							<uni-icons type="plusempty" size="30" style="color: #BFBFBF;"></uni-icons>
							<view class="upload-text">上传营业执照</view>
						</view>
					</uni-file-picker>
				</view>
			</form>
		</view>
		<!-- 门店照片部分 -->
		<view class="upload-card">
			<view class="card-title">门店照片</view>
			<form @submit="onSubmit">
				<view class="upload-container">
					<uni-file-picker limit="1" :image-styles="imageStyles" class="upload-picker">
						<view class="upload-content">
							<uni-icons type="plusempty" size="30" style="color: #BFBFBF;"></uni-icons>
							<view class="upload-text">上传门店照片</view>
						</view>
					</uni-file-picker>
				</view>
			</form>
		</view>
		<button form-type="submit" class="modify-button">保存</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageStyles: {
					height: '200rpx',
					width: '200rpx'
				}
			};
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			onSubmit(e) {
				console.log(e);
				// 表单提交逻辑
			},
			getVerificationCode() {
				// 获取验证码逻辑
			}
		}
	};
</script>

<style>
	page {
		background-color: #F7F7F7;
	}

	.page {
		display: flex;
		flex-direction: column;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		min-height: 100vh;
		/* 确保父元素有足够高度 */
	}

	.background {
		position: relative;
		background-color: #3183FB;
		width: 100%;
		height: 200rpx;
	}

	.form-card {
		top: -130rpx;
		width: 90%;
		position: relative;
		background-color: white;
		border-radius: 10rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
		padding: 20rpx;
	}

	.form-item {
		display: flex;
		justify-content: space-between;
		margin: 20rpx;
	}

	.form-label {
		margin-top: 8rpx;
		font-size: 26rpx;
		font-weight: bold;
	}

	.form-input {
		border: 1rpx solid #DADADA;
		border-radius: 40rpx;
		padding: 0 20rpx;
		height: 60rpx;
		width: 300rpx;
	}

	.verification-code-item {
		position: relative;
	}

	.verification-code-input {
		width: 165rpx;
		padding-right: 160rpx;
		/* 为获取验证码按钮留出空间 */
	}

	.get-verification-code {
		position: absolute;
		right: 10rpx;
		top: 50%;
		transform: translateY(-50%);
		color: #3183FB;
		font-size: 26rpx;
		font-weight: bold;
		border-left: 1rpx solid #DADADA;
		padding-left: 10rpx;
		cursor: pointer;
	}

	.info-card {
		margin: 20rpx;
		top: -130rpx;
		position: relative;
		width: 90%;
		background-color: white;
		border-radius: 10rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
		padding: 20rpx;
	}

	.card-title {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 20rpx;
	}

	.info-textarea {
		border: 1rpx solid #DADADA;
		height: 200rpx;
		border-radius: 20rpx;
		padding: 10rpx;
	}

	.upload-card {
		top: -130rpx;
		position: relative;
		width: 90%;
		margin: 20rpx;
		background-color: white;
		border-radius: 10rpx;
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
		padding: 20rpx;
	}

	.upload-container {
		display: flex;

	}

	.upload-picker {
		margin-right: 20rpx;
	}

	.upload-content {
		text-align: center;
	}

	.upload-icon {
		color: #DADADA;
	}

	.upload-text {
		color: #DADADA;
	}

	.modify-button {
		margin: 20rpx 0;
		width: 300rpx;
		border-radius: 40rpx;
		color: white;
		background: linear-gradient(to right, #2E81FA, #0A64E7);
		/* 从左至右的蓝色渐变 */
	}
</style>